<template>
	<div class="echart_box">
		<div class="echart" id="mychart" style="width:100%; height: 300px;"></div>
		<div class="back" :style="`--timeWidth: ${timeWidth}px`" @click="back" v-if="showBack">
			<i class="el-icon-right"></i>
		</div>
		<!-- <div @click="testMyOrder()">get</div> -->
		<!-- <div @click="testAdd()">add</div> -->
	</div>
</template>

<script>
	// import * as echarts from "echarts";
	import {
		createChart
	} from "lightweight-charts";
	import {
		createWebSocket,
		sendSock,
		closeSock
	} from "@/utils/websocket";
	import {
		marketTickHistory,
		marketHistoryKline
	} from "@/api/home";
	import * as TWEEN from "@tweenjs/tween.js";

	export default {
		props: {},
		components: {},
		data() {
			return {
				//   chart: null,
				//   areaSeries: null,
				initStatus: false,
				loading: false,
				showBack: false,
				wsLogin: false, // 长连接是否登录
				acTick: 1, // 1tick 2烛台
				markSize: 5,
				bgType: 0, // 当前是跌还是涨
				myToolTip: {
					width: 66,
					height: 50,
					margin: 6,
				},
				timeWidth: 0,
				rafId: null,
				lastFrameTime: 0, // 存储上次动画帧执行的时间
				interval: 60, // 设置动画更新的间隔（毫秒），100毫秒意味着大约10FPS
				orderInfo: {
					amount: 10,
					profit: "3.70",
					timestamp: 1710139726000,
					avatar: "/head/images/head/head2_l.png",
					type: 2,
					uid: 1172,
					nickname: "2450855969@qq.com",
					remain_milli_seconds: 14,
					profit_ratio: "37",
					open_price: "68784.83406",
					order: {
						profit_result: 0,
						user_id: 1172,
						match_id: 3,
						currency_id: 2,
						range_id: 0,
						type: 2,
						seconds: 15,
						number: 10,
						open_price: "68784.83406",
						end_price: "68784.83406",
						price_range: "25450.38860220",
						profit_ratio: "0.37",
						fee: 0,
						status: 1,
						pre_profit_result: 0,
						handled_at: "2024-03-11 14:49:01",
						agent_path: "1",
						trading_volume: 0,
						updated_at: "2024-03-11 14:48:46",
						created_at: "2024-03-11 14:48:46",
						id: 5399,
						pre_profit_result_admin: 0,
						currency_code: "USDT",
						symbol_name: "BTC/USDT",
						account: "3982563",
						profit: 0,
						type_name: "跌",
						status_name: "交易中",
						profit_result_name: "无",
						remain_milli_seconds: 14,
						avatar: "/head/images/head/head2_l.png",
						nickname: "2450855969@qq.com",
						pre_profit_result_name: "无预设",
						user: {
							id: 1172,
							uid: "3982563",
							mobile: "",
							telegram_user_id: null,
							google_user_id: null,
							google_email: null,
							email: "2450855969@qq.com",
							address: null,
							area_id: 1,
							status: 1,
							tx_status: 1,
							parent_id: 0,
							invite_code: "4JASF9",
							last_login_ip: "192.168.1.5",
							last_login_at: "2024-03-11 14:06:59",
							parents_path: "",
							agent_id: 0,
							agent_node_id: 1,
							agent_path: "1",
							updated_at: "2024-03-11 14:06:59",
							created_at: "2024-02-20 14:53:29",
							reg_type: "email",
							trading_volume: null,
							cl_number: null,
							level: 0,
							reg_ip: "192.168.1.4",
							is_test_number: 0,
							percentage_of_prime: null,
							risk_type: 0,
							risk_endat: null,
							risk_value: null,
							risk_times: 0,
							kefu_remark: null,
							need_trading_volume: "0.0000",
							diamond_level: 1,
							diamond_team_log: "0",
							team_number: 0,
							mirco_risk_type: 0,
							nickname: "2450855969@qq.com",
							realname: null,
							avatar: "/head/images/head/head2_l.png",
							balance: "0.000000",
						},
						currency: {
							id: 2,
							code: "USDT",
							logo: "/uploads/20240310/acd01231dd34231e92423c3436897ce5.png",
							desc: null,
							decimal: 8,
							accounts_display: [],
							is_quote: 1,
							draw_rate: "0.0200",
							draw_min: "100.0000",
							draw_max: "999999999",
							created_at: "2021-02-21 09:28:22",
							updated_at: "2024-03-10 11:56:15",
							open_draw: 1,
							micro_trade_fee: "0.000",
							open_recharge: 1,
							sort: 1,
							open_bet: 1,
							charge_min: "50",
							charge_max: "9999999999",
							marker_from: 2,
							color: "#36cb10",
							micro_account_display: false,
							change_account_display: false,
						},
						currency_match: {
							id: 3,
							quote_currency_id: 2,
							base_currency_id: 1,
							market_from: 2,
							open_lever: 1,
							open_change: 1,
							open_microtrade: 1,
							lever_point_rate: "0.0000",
							use_process: 0,
							auto_match: 1,
							match_user_id: 1,
							sort: 1,
							order_risk_rate: "0.0001",
							created_at: "2019-09-11 10:36:55",
							updated_at: "2022-02-20 10:51:22",
							plate_id: 0,
							open_market: 0,
							open_flash: 1,
							is_show: 1,
							trade_min: "0.0010",
							trade_max: "999999.9999",
							open_contract: null,
							leverage: "100",
							sharenumber: 10,
							enablemarketbuy: 1,
							enablemarketsell: 1,
							enableopenbuy: 1,
							enableopensell: 1,
							open_fee: null,
							lever_max_share: 49999,
							lever_min_share: 1,
							openFee: "0.030",
							closeFee: "0.030",
							change_fee_rate: null,
							lever_fee_rate: "0.0100",
							lever_overnight_fee_rate: "0.0150",
							lever_share_num: "10.0000",
							flash_min: "0.01",
							symbol: "BTC/USDT",
							base_currency_code: "BTC",
							quote_currency_code: "USDT",
							lower_symbol: "btcusdt",
							lower_symbol_lever: "BTC-USDT",
							upper_symbol: "BTC-USDT",
							base_currency: {
								id: 1,
								code: "BTC",
								logo: "/uploads/20240310/cb2bd3fa2511372219efd9dc10b8003f.png",
								desc: null,
								decimal: 8,
								accounts_display: [],
								is_quote: 0,
								draw_rate: "0.0200",
								draw_min: "0.0010",
								draw_max: "999999999",
								created_at: "2021-02-21 09:26:59",
								updated_at: "2024-03-10 11:55:52",
								open_draw: 1,
								micro_trade_fee: "0.000",
								open_recharge: 0,
								sort: 0,
								open_bet: 0,
								charge_min: "0.001",
								charge_max: "999999999",
								marker_from: 2,
								color: "#0a0a0a",
								micro_account_display: false,
								change_account_display: false,
							},
							quote_currency: {
								id: 2,
								code: "USDT",
								logo: "/uploads/20240310/acd01231dd34231e92423c3436897ce5.png",
								desc: null,
								decimal: 8,
								accounts_display: [],
								is_quote: 1,
								draw_rate: "0.0200",
								draw_min: "100.0000",
								draw_max: "999999999",
								created_at: "2021-02-21 09:28:22",
								updated_at: "2024-03-10 11:56:15",
								open_draw: 1,
								micro_trade_fee: "0.000",
								open_recharge: 1,
								sort: 1,
								open_bet: 1,
								charge_min: "50",
								charge_max: "9999999999",
								marker_from: 2,
								color: "#36cb10",
								micro_account_display: false,
								change_account_display: false,
							},
						},
					},
				},
				// time: 1709179200000,
				// time: 1709136000000,
				tickObj: {
					// 长连接 period 对应的推送
					Tick: "Tick",
					"1m": "1min",
					"5m": "5min",
					"1h": "1hour",
					"4h": "4hour",
					"1d": "1day",
				},
				newSeries: {}, // 最新一期
				dataSeries: [],
				toolTipList: [], // 用户下单显示的dom
				myToolTipList: [], // 自己下单显示的dom
				myToolProFitList: [], // 自己下单的收益
				lastObj: {}, // 测试用
				initEchartsData: [
					// {
					// 	"value": "67213.74444",
					// 	"time": 1709868866000
					// },
					// {
					// 	"value": "67213.89589",
					// 	"time": 1709868867000
					// },
					// {
					// 	"value": "67213.80812",
					// 	"time": 1709868868000
					// },
					// {
					// 	"value": "67213.78574",
					// 	"time": 1709868869000
					// },
					// {
					// 	"value": "67213.87527",
					// 	"time": 1709868870000
					// },
					// {
					// 	"value": "67213.74857",
					// 	"time": 1709868871000
					// },
					// {
					// 	"value": "67213.82196",
					// 	"time": 1709868872000
					// },
					// {
					// 	"value": "67208.67033",
					// 	"time": 1709868873000
					// },
					// {
					// 	"value": "67208.98671",
					// 	"time": 1709868874000
					// },
					// {
					// 	"value": "67208.63177",
					// 	"time": 1709868875000
					// },
					// {
					// 	"value": "67196.19434",
					// 	"time": 1709868876000
					// },
					// {
					// 	"value": "67196.54461",
					// 	"time": 1709868877000
					// },
					// {
					// 	"value": "67196.29005",
					// 	"time": 1709868878000
					// },
					// {
					// 	"value": "67196.20232",
					// 	"time": 1709868879000
					// },
					// {
					// 	"value": "67196.16934",
					// 	"time": 1709868880000
					// },
					// {
					// 	"value": "67196.95055",
					// 	"time": 1709868881000
					// },
					// {
					// 	"value": "67196.02484",
					// 	"time": 1709868882000
					// },
					// {
					// 	"value": "67196.35831",
					// 	"time": 1709868883000
					// },
					// {
					// 	"value": "67196.34579",
					// 	"time": 1709868884000
					// },
					// {
					// 	"value": "67196.63611",
					// 	"time": 1709868885000
					// },
					// {
					// 	"value": "67196.23944",
					// 	"time": 1709868886000
					// },
					// {
					// 	"value": "67196.81174",
					// 	"time": 1709868887000
					// },
					// {
					// 	"value": "67196.19187",
					// 	"time": 1709868888000
					// },
					// {
					// 	"value": "67196.32385",
					// 	"time": 1709868889000
					// },
					// {
					// 	"value": "67196.34081",
					// 	"time": 1709868890000
					// },
					// {
					// 	"value": "67196.19955",
					// 	"time": 1709868891000
					// },
					// {
					// 	"value": "67196.86629",
					// 	"time": 1709868892000
					// },
					// {
					// 	"value": "67196.44774",
					// 	"time": 1709868893000
					// },
					// {
					// 	"value": "67196.26296",
					// 	"time": 1709868894000
					// },
					// {
					// 	"value": "67196.15913",
					// 	"time": 1709868895000
					// }
				], // 初始化数据
			};
		},
		computed: {
			matches() {
				return this.$store.state.matches;
			},
			allMatches() {
				return this.$store.state.allMatches
			},
			userInfo() {
				return this.$store.state.userInfo;
			},
			newOrderPrice() {
				return this.$store.state.newOrderPrice;
			},
			closeMyDownOrder() {
				return this.$store.state.closeMyDownOrder;
			},
			tick() {
				return this.$store.state.tick;
			},
			webSocketStatus() {
				return this.$store.state.webSocketStatus;
			},
			timeDown() {
				return this.$store.state.timeDown;
			},
			oneMinPrice() {
				return this.$store.state.oneMinPrice
			}
		},
		watch: {
			timeDown() {
				// this.areaSeries?.update(this.newSeries);
			},
			newOrderPrice(val, oldval) {
				// console.log('val', val, oldval);
				if (val && oldval) {
					if (this.tick == "Tick") {
						if (val.price > oldval.price) {
							this.setPriceLineColor(1);
							this.bgType = 1
						} else {
							this.setPriceLineColor(2);
							this.bgType = 2
						}
					} else {
						if (val.close > oldval.close) {
							this.setPriceLineColor(1);
							this.bgType = 1
						} else {
							this.setPriceLineColor(2);
							this.bgType = 2
						}
					}
				}
			},
			closeMyDownOrder(val) {
				if (val) {
					const container = document.getElementById("mychart");
					const tdElement = document.querySelector(
						"#mychart .tv-lightweight-charts table tr:first-child td:nth-child(2) div"
					);
					var children = tdElement.children;
					for (var item of children) {
						if (item.id == val.timestamp) {
							tdElement.removeChild(item);
						}
					}
				}
			},
			tick(val) {
				this.changeTick(val);
			},
			// 拿到交易对id 再去请求历史数据
			matches(val) {
				if (val && val.id) {
					this.init();
					this.showBack = false;
					if (this.webSocketStatus) {
						// closeSock()
					} else {
						// this.startAnimating();
						createWebSocket(this.webSocket);
					}
				}
			},
		},
		async mounted() {
			if (this.matches && this.matches.id) {
				await this.init();
				// this.startAnimating();
				createWebSocket(this.webSocket);
			}
			this.worker = new Worker("/timer_worker.js");
			this.worker.onmessage = (e) => {
				if (this.tween && this.acTick == 1) {
					this.tween.update();
				}
			};
		},
		beforeDestroy() {
			this.worker.terminate();
		},
		methods: {
			startAnimating() {
				const animate = (time) => {
					// 计算上次执行以来经过的时间
					if (time - this.lastFrameTime > this.interval) {
						if (this.tween) {
							this.tween.update(); // 更新动画或执行相关的更新操作
						}
						this.lastFrameTime = time; // 更新上次帧时间
					}
					this.rafId = requestAnimationFrame(animate); // 继续递归调用以持续更新
				};
				this.rafId = requestAnimationFrame(animate); // 初始调用
			},
			stopAnimating() {
				if (this.rafId) {
					cancelAnimationFrame(this.rafId); // 停止动画
					this.rafId = null;
				}
			},
			async init() {
				let tick = localStorage.getItem("Tick");
				if (tick && tick != "Tick") {
					await this.getListK();
					this.initEcharts2();
					this.acTick = 2;
				} else {
					console.log('请求了');
					await this.getList();
					this.initEcharts();
					this.acTick = 1;
				}
			},
			webSocket(data) {
				// console.log('webSocket：：：', data);
				if (data && data.type == "open") {
					// sendSock(JSON.stringify({
					// 	type: 'sub',
					// 	params: `GLOBAL_TX.ETHUSDT`
					// }))

					// sendSock(JSON.stringify({
					// 	type: 'sub',
					// 	params: `GLOBAL_TX.BTCUSDT`
					// }))
					let token = localStorage.getItem('TOKEN')
					if (token) {
						sendSock(JSON.stringify({
							type: 'login',
							params: `${token}`
						}))
					}

					this.allMatches.map(item => {
						// 折线图的订阅
						sendSock(JSON.stringify({
							type: 'sub',
							params: `GLOBAL_TX.${item.binance_symbol}`
						}))
						// 烛台图的订阅
						sendSock(JSON.stringify({
							type: 'sub',
							params: `KLINE.${item.binance_symbol}`
						}))
						sendSock(JSON.stringify({
							type: 'sub',
							params: `TRADE.${item.binance_symbol}`
						}))
						sendSock(JSON.stringify({
							type: 'sub',
							params: `ODDS.${item.binance_symbol}`
						}))
					})

					this.initStatus = true; // 初始化
				}
				if (data && data.type == 'login_result' && data.code == 1) {
					this.wsLogin = true;
					sendSock(JSON.stringify({
						type: 'sub',
						params: `MICRO_CLOSED`
					}))
				}
				if (data && data.type == "close") {
					console.log("关闭了链接");
					this.$store.commit("onChangeWebSocketStatus", false);
					if (this.$route.path == "/mobile/home") {
						setTimeout(() => {
							createWebSocket(this.webSocket);
						}, 500);
					}
				}
				if (data && data.type == "sub_result") {
					console.log("订阅成功开启了链接");
					this.$store.commit("onChangeWebSocketStatus", true);
				}
				if (data && data.type == "MICRO_CLOSED") {
					// 收益
					this.createMyProFit(data.order);
				}
				if (data && data.type == "KLINE") {
					// console.log('KLINE', data);
					if (this.acTick == 2) {
						// console.log('!!!!!!!!!!!!!!!!!!', data.kline.period, this.tickObj[this.tick], this.tickObj, this.tick);
						if (data.kline.period == this.tickObj[this.tick] && data.symbol == this.matches.binance_symbol) {
							this.newSeries = {
								...data.kline,
								oldTime: data.kline.time,
								time: data.kline.time / 1000,
							};
							// console.log('newSeries', this.newSeries);
							// this.$nextTick(() => {
							// 1min 5min 1hour 1day
							this.areaSeries?.update(this.newSeries);
							// 缓存最新的 用于获取x ,y 值
							this.$store.commit("upDataNewOrderPrice", this.newSeries);
							// })
						}
					}
					if (data.kline.period == "1min") {
						let obj = JSON.parse(JSON.stringify(this.oneMinPrice))
						// this.allMatches.map(item => {
						// console.log('一分钟数据', obj, data);
						obj[data.symbol] = {
							...data.kline,
							oldTime: data.kline.time,
							time: data.kline.time / 1000,
						}
						// obj.status = !this.oneMinPrice.status 
						// })
						// console.log('一分钟数据', obj, data);
						this.$store.commit('upDataOneMinPrice', obj)
					}
				}
				if (data && data.type == "GLOBAL_TX") {
					if (this.acTick == 1) {
						let obj = data.completes[0];
						const duration = obj.timestamp - this.newSeries.time;
						if (duration < 300 || data.symbol != this.matches.binance_symbol || this.loading) return;
						// console.log('dataaaaaaaaaa', this.newSeries, obj, data, this.matches);
						const prevData = {
							...this.newSeries,
							time: this.newSeries.time,
							value: Number(this.newSeries.value),
						};
						const newData = {
							time: obj.timestamp,
							value: Number(obj.price),
						};
						const newSeries = {
							...obj,
							time: obj.timestamp,
							value: obj.price,
							symbol: data.symbol,
						};
						if (this.tween) {
							this.tween.end();
						}
						// 切换的时候上一个 prevData 数据是之前的行情
						this.tween = new TWEEN.Tween(prevData.symbol != newSeries.symbol ? newSeries : prevData, false)
							.to(newData, duration)
							.easing(TWEEN.Easing.Cubic.InOut)
							.onUpdate(() => {
								try {
									if (this.newSeries.symbol != this.matches.binance_symbol) return
									// console.log('newSeries::', newSeries, prevData);
									this.areaSeries?.update({
										...newSeries,
										time: Math.round(prevData.time),
										value: String(prevData.value),
									});
								} catch (error) {}
							})
							.start();
						// this.$nextTick(() => {
						// console.log('newSeries::', this.newSeries);
						// this.areaSeries?.update(this.newSeries || {});
						// this.areaSeries?.setMarkers([{
						// 	time: obj.timestamp,
						// 	position: "inBar",
						// 	color: '#f68410',
						// 	shape: 'circle',
						// 	size: 1,
						// }]);
						this.newSeries = newSeries;
						// 缓存最新的 用于获取x ,y 值
						this.$store.commit("upDataNewOrderPrice", this.newSeries);
						// })
					}
					this.$store.commit("upDataTickPrice", {
						...data.completes[0],
						time: data.completes[0].timestamp,
						value: data.completes[0].price,
					});
				}
				if (data && data.type == "TRADE") {
					if (this.toolTipList.length <= 3) {
						if (data.trade.uid == this.userInfo.id) {
							// console.log('自己下单了：：：：：', data);
							this.createMyOrder(data.trade);
						} else {
							// console.log('有人下单了：：：：：', data);
							this.createOrder(data.trade);
						}
					}
				}
				if (data && data.type == "ODDS") {
					this.$store.commit("upDataOdd", data.odds);
					this.$store.commit("onChangeTips", 3);
				}
			},
			async getList(lastTime) {
				if (this.loading || !this.matches.id) return;
				this.loading = true;
				let startTime =
					this.$day()
					.subtract(15, "second")
					.valueOf() / 1000;
				let endTime = this.$day().valueOf() / 1000;
				if (lastTime) {
					// console.log('lastTime11111:', startTime, endTime);
					startTime =
						this.$day(lastTime)
						.subtract(10, "second")
						.valueOf() / 1000;
					endTime =
						this.$day(lastTime)
						.subtract(1, "second")
						.valueOf() / 1000;
					// console.log('lastTime2222:', startTime, endTime);
				}
				const res = await marketTickHistory({
					match_id: this.matches.id,
					startTime: startTime,
					endTime: endTime,
				});
				// console.log('历史', res);
				if (res && res.code == 1) {
					let newArr = res.data.map((i) => {
						return {
							...i,
							time: i.timestamp,
							value: i.price,
						};
					});
					// 有lastTime 代表拿老数据
					if (lastTime) {
						this.initEchartsData = [
							...this.$utils.interpolate(newArr),
							...this.initEchartsData,
						];
						this.areaSeries.setData(this.initEchartsData);
					} else {
						this.initEchartsData = this.$utils.interpolate(newArr);
						// this.initEchartsData = this.$utils.interpolate(this.initEchartsData);
						this.$nextTick(() => {
							this.newSeries =
								this.initEchartsData[this.initEchartsData.length - 1] || {};
						})
					}

				}
				this.$nextTick(() => {
					this.loading = false;
				});
				// console.log('tickRes::::', res);
			},
			async getListK(lastTime) {
				if (this.loading || !this.matches.id) return;
				this.loading = true;
				let startTime;
				let endTimeN;
				if (this.tick == "1m") {
					startTime = this.$day(lastTime ? lastTime * 1000 : new Date())
						.subtract(30, "minute")
						.valueOf();
				} else if (this.tick == "5m") {
					startTime = this.$day(lastTime ? lastTime * 1000 : new Date())
						.subtract(150, "minute")
						.valueOf();
				} else if (this.tick == "1h") {
					startTime = this.$day(lastTime ? lastTime * 1000 : new Date())
						.subtract(30, "hour")
						.valueOf();
				} else if (this.tick == "4h") {
					startTime = this.$day(lastTime ? lastTime * 1000 : new Date())
						.subtract(150, "hour")
						.valueOf();
				} else if (this.tick == "1d") {
					startTime = this.$day(lastTime ? lastTime * 1000 : new Date())
						.subtract(30, "day")
						.valueOf();
					endTimeN = lastTime ?
						lastTime * 1000 :
						this.$day()
						.subtract(1, "day")
						.valueOf();
				}
				// console.log('^^^^^^^^^^', {
				// 	currency_match_id: this.matches.id,
				// 	period: this.tickObj[this.tick],
				// 	startTime: startTime,
				// 	endTime: endTimeN ? endTimeN : this.$day().valueOf(),
				// });
				// if (lastTime) return
				const res = await marketHistoryKline({
					match_id: this.matches.id,
					currency_match_id: this.matches.id,
					period: this.tickObj[this.tick],
					startTime: startTime,
					endTime: lastTime ?
						lastTime * 1000 : endTimeN ?
						endTimeN : this.$day().valueOf(),
				}).catch((err) => (this.loading = false));
				// console.log('ress', res);
				if (res && res.code == 1) {
					let newArr = Object.values(res.data).map((i) => {
						return {
							...i,
							time: i.time / 1000,
						};
					});
					// 有lastTime 代表拿老数据
					if (lastTime) {
						// 删除重复的一项
						newArr.pop();
						this.initEchartsData = [...newArr, ...this.initEchartsData];
						this.areaSeries.setData(this.initEchartsData);
					} else {
						this.initEchartsData = newArr;
					}
				}
				this.$nextTick(() => {
					this.loading = false;
				});
				// console.log('res:::', res, this.initEchartsData);
			},
			async changeTick(val) {
				this.chart.remove();
				if (val != "Tick") {
					await this.getListK();
					this.initEcharts2();
					this.acTick = 2;
				} else {
					await this.getList();
					this.initEcharts();
					this.acTick = 1;
				}
				// console.log('acTick', this.acTick);
			},

			getNearestSecond5(date) {
				const seconds = date.getSeconds();
				const lastDigit = seconds % 10; // 获取秒数的个位数
				if (seconds === 59) {
					// 如果秒数为59，则进到下一分钟
					date.setSeconds(0);
					date.setMinutes(date.getMinutes() + 1);
				} else if (lastDigit === 1 || lastDigit === 9) {
					// 如果个位数是1或9，则调整为0
					if (lastDigit === 9) {
						date.setSeconds(date.getSeconds() + 1);
					} else {
						date.setSeconds(seconds - lastDigit);
					}
				} else if (lastDigit === 4 || lastDigit === 6) {
					// 如果个位数是4或6，则调整为5
					date.setSeconds(seconds - lastDigit + 5);
				}
				return date;
			},
			customFormatter(time, tickMarkType, locale) {
				// console.log('time', time, tickMarkType, locale);
				if (this.newTime == time) return "";
				this.newTime = time;
				if (this.acTick == 2) {
					// console.log('time', time);
					let newTime = time * 1000;
					if (this.tick == "1m") {
						return this.$day(newTime).format("HH:mm:ss");
					} else if (this.tick == "1d") {
						return this.$day(newTime).format("YYYY-MM-DD");
					} else {
						return this.$day(newTime).format("MM-DD HH:mm");
					}
				} else {
					// const date = new Date(time); // 将 UNIX 时间戳转换为 JavaScript 时间对象
					// const hours = date.getHours().toString().padStart(2, '0'); // 获取小时并补零
					// const minutes = date.getMinutes().toString().padStart(2, '0'); // 获取分钟并补零
					// // const adjustedDate = this.getNearestSecond5(date).toString();
					// const seconds = this.$day(time).format('ss'); // 获取秒数并补零
					// if (seconds % 5 === 0) {
					// return `${hours}:${minutes}:${seconds}`; // 返回自定义格式的时间字符串
					return this.$day(time).format("HH:mm:ss"); // 返回自定义格式的时间字符串
					// } else {
					// 	return ''
					// }
				}
			},
			CustomPriceFormatter(val) {
				let str = val;
				// console.log('val2', val2);
				if (typeof str === "string") {
					str = parseFloat(str); // 将字符串转换为数值类型
				}
				if (typeof str === "number") {
					if (isNaN(str)) {
						// 处理无效数值的情况
						console.error("Invalid number");
					} else {
						if (Number.isInteger(str)) {
							const desiredWidth = 13;
							const formattedPrice = str.toFixed(2); // 格式化价格到小数点后两位
							const priceString = formattedPrice.toString();
							const padding = " ".repeat(
								Math.max(0, desiredWidth - priceString.length)
							); // 计算并添加空格
							// console.log('padding', padding, priceString.length);
							// 整数的情况
							str = `${padding}${str.toFixed(2)}`;
						} else {
							if (this.areDecimalsSame(str)) {
								str = str.toFixed(2);
							} else {
								// 非整数的情况
								str = str.toFixed(5);
							}
						}
					}
				} else {
					// 处理非数值的情况
					console.error("Not a number");
				}

				// console.log('str', str);
				return str;
			},
			initEcharts() {
				this.initStatus = false; // 初始化
				document.getElementById("mychart").innerHTML = "";

				// if (this.chart) {
				// 	console.log('？？？？？？');
				// 	this.chart
				// 		.timeScale()
				// 		.unsubscribeVisibleTimeRangeChange(this.myVisibleTimeRangeChangeHandler);
				// }

				const chartOptions = {
					layout: {
						background: {
							color: "#161D26",
						},
						textColor: "#8B8D98",
						// fontSize: 20,
						// fontFamily: 'Microsoft YaHei, PingFang SC',
						// fontWeight: 'bold',
					},
					LineData: {
						color: "#161D26",
						axisLabelVisible: false,
					},
					grid: {
						vertLines: {
							visible: false,
						},
						horzLines: {
							visible: false,
						},
					},
					rightPriceScale: {
						borderVisible: false,
						// borderColor: '#ffffff',
						// minimumWidth: 100,
						// visible: false,
						// ticksVisible: true,
						// scaleMargins: {
						// 	bottom: 0.3,
						// 	top: 0.3,
						// }
					},
					priceLine: {
						axisLabelVisible: false,
					},
					timeScale: {
						borderVisible: false,
						timeVisible: true,
						tickMarkFormatter: this.customFormatter,
						// secondsVisible: false,
						// minBarSpacing: 5,
						// barSpacing: 100,
						allowBoldLabels: false,
						tickMarkMaxCharacterLength: 10,
						// uniformDistribution: false,
						// barSpacing: 15,
						// tickMarkType: 4,
					},
					localization: {
						type: "custom",
						priceFormatter: this.CustomPriceFormatter, // 自定义价格格式化器
						minMove: 0.000001,
					},
				};

				this.chart = createChart(
					document.getElementById("mychart"),
					chartOptions
				);
				// this.chart.applyOptions({
				// 	timeScale: {
				// 		barSpacing: 100,
				// 	}
				// })
				// this.chart.priceScale().applyOptions({

				// })


				// this.chart.subscribeCrosshairMove(this.subscribeCrosshairMove);
				this.areaSeries = this.chart.addAreaSeries({
					priceLineColor: "#2ECC71", // 价格线 SeriesOptionsCommon 配置
					// priceFormat: {
					// 	precision: 4,
					// 	minMove: 1,
					// },
					// priceLineVisible: false,
					// visible: false,
					// title: 'title',
					lineType: 2,
					lineWidth: 2,
					lastPriceAnimation: 2,
					lineColor: "#0091FF",
					topColor: "rgba(0,42,255,0.3)",
					bottomColor: "rgba(19,126,254,0)",
					autoscaleInfoProvider: (original) => {
						const res = original();
						if (res !== null) {
							res.priceRange.minValue -= 5;
							res.priceRange.maxValue += 5;
						}
						return {
							...res,
						};
					},
				});
				// this.areaSeries.createPriceLine({
				// 	price: 66790,
				// 	axisLabelVisible: true,
				// 	title: 'my label'
				// })
				// console.log('this.chart.timeScale()', this.chart.priceScale().width());
				// console.log('areaSeries', this.areaSeries, this.chart);
				// this.areaSeries.setData(this.initEchartsData);
				this.areaSeries.setData(this.initEchartsData);
				// this.areaSeries.setMarkers([{
				// 	time: this.initEchartsData[this.initEchartsData.length - 1].time,
				// 	position: 'inBar',
				// 	text: 'example',
				// 	color: '#f68410',
				// 	shape: 'circle',
				// 	size: 1,
				// }]);
				// console.log('this.areaSeries.markers()', this.chart.priceScale());
				this.timeWidth = this.chart.timeScale().width();
				this.chart.timeScale().fitContent();

				this.$nextTick(() => {
					this.chart
						.timeScale()
						.subscribeVisibleTimeRangeChange(this.myVisibleTimeRangeChangeHandler);
				})

				// console.log('');
				// this.chart.timeScale().setVisibleRange({
				// 	from: Date.now() - 10 * 1000, // 当前时间减去 10 秒
				// 	// to: Date.now() // 当前时间
				// });
			},
			initEcharts2() {
				document.getElementById("mychart").innerHTML = "";
				const chartOptions = {
					layout: {
						background: {
							color: "#161D26",
						},
						textColor: "#8B8D98",
					},
					LineData: {
						color: "#161D26",
					},
					grid: {
						vertLines: {
							visible: false,
						},
						horzLines: {
							visible: false,
						},
					},
					timeScale: {
						timeVisible: true,
						tickMarkFormatter: this.customFormatter,
						minBarSpacing: 2.5,
						// barSpacing: 30,
						// barSpacing: 0,
					},
					localization: {
						type: "custom",
						priceFormatter: this.CustomPriceFormatter, // 自定义价格格式化器
						minMove: 0.000001,
					},
				};

				this.chart = createChart(
					document.getElementById("mychart"),
					chartOptions
				);
				this.chart
					.timeScale()
					.subscribeVisibleTimeRangeChange(this.myVisibleTimeRangeChangeHandler);
				// this.chart.subscribeCrosshairMove(this.subscribeCrosshairMove);
				this.areaSeries = this.chart.addCandlestickSeries({
					upColor: "#26a69a",
					downColor: "#ef5350",
					priceFormat: {
						precision: 2,
						minMove: 0.000001,
					},
				});
				this.areaSeries.setData(this.initEchartsData);
				this.timeWidth = this.chart.timeScale().width();
				this.chart.timeScale().fitContent();
			},
			setPriceLineColor(type) {
				this.areaSeries?.applyOptions({
					priceLineColor: type == 1 ? "#2ECC71" : "#FF5449", // 修改价格线颜色为红色
				});
			},

			myVisibleTimeRangeChangeHandler(newVisibleTimeRange) {
				if (this.toolTipList.length > 0) {
					const container = document.getElementById("mychart");
					const tdElement = document.querySelector(
						"#mychart .tv-lightweight-charts table tr:first-child td:nth-child(2) div"
					);
					var children = tdElement.children;
					for (var item of children) {
						let find = this.toolTipList.find((i) => i == item.id);
						if (find) {
							const chartBounds = this.chart.timeScale().getVisibleRange();
							const coord = this.chart
								.timeScale()
								.timeToCoordinate(Number(item.id), chartBounds);
							const xCoordinate = coord !== null ? coord - 33 : -999;
							const coordinate = this.areaSeries.priceToCoordinate(
								Number(item.getAttribute("price"))
							);
							const toolTipHeight = 70;
							const coordinateY =
								coordinate - toolTipHeight > 0 ?
								coordinate - toolTipHeight :
								Math.max(
									0,
									Math.min(container.clientHeight - toolTipHeight, coordinate)
								);
							if (coordinate - toolTipHeight > 0) {
								const div = item.querySelector("div");
								div.className = "otherOrder_el";
								item.style.top = coordinateY + "px";
							} else {
								const div = item.querySelector("div");
								div.className = "otherOrder_el2";
								item.style.top = coordinateY + 5 + "px";
							}
							// console.log('find', xCoordinate, item.id / 1000);
							item.style.left = xCoordinate + "px";
							// item.style.top = coordinateY + 'px';
						}
					}
					// console.log('children', children, this.toolTipList);
					// this.toolTipList.map(i => {
					// 	container.children
					// })
					// let x = this.chart.timeScale().timeToCoordinate(1642425322)
				}

				if (this.myToolTipList.length > 0) {
					const container = document.getElementById("mychart");
					const tdElement = document.querySelector(
						"#mychart .tv-lightweight-charts table tr:first-child td:nth-child(2) div"
					);
					var children = tdElement.children;
					for (var item of children) {
						let find = this.myToolTipList.find((i) => i == item.id);
						if (find) {
							const chartBounds = this.chart.timeScale().getVisibleRange();
							const coord = this.chart
								.timeScale()
								.timeToCoordinate(Number(item.id), chartBounds);
							const xCoordinate = coord !== null ? coord - 33 : -999;
							const coordinate = this.areaSeries.priceToCoordinate(
								Number(item.getAttribute("price"))
							);
							const toolTipWidth = this.myToolTip.width;
							const toolTipHeight = this.myToolTip.height;
							const toolTipMargin = this.myToolTip.margin;
							// const coordinateY = coordinate > 70 ? coordinate - 50 : coordinate
							// if (coordinate > 70) {
							// 	const div = item.querySelector('div')
							// 	div.className = 'myOrder_el'
							// } else {
							// 	const div = item.querySelector('div')
							// 	div.className = 'myOrder2_el'
							// }
							const coordinateY =
								coordinate - toolTipHeight > 0 ?
								coordinate - toolTipHeight :
								Math.max(
									0,
									Math.min(container.clientHeight - toolTipHeight, coordinate)
								);
							if (coordinate - toolTipHeight > 0) {
								const div = item.querySelector("div");
								div.className = "myOrder_el";
								item.style.top = coordinateY + 12 + "px";
							} else {
								const div = item.querySelector("div");
								div.className = "myOrder2_el";
								item.style.top = coordinateY - 12 + "px";
							}
							item.style.left = xCoordinate + "px";
						}
					}
				}



				if (this.myToolProFitList.length > 0) {
					const container = document.getElementById("mychart");
					const tdElement = document.querySelector(
						"#mychart .tv-lightweight-charts table tr:first-child td:nth-child(2) div"
					);
					var children = tdElement.children;
					for (var item of children) {
						let find = this.myToolProFitList.find((i) => i == item.id);
						if (find) {
							const chartBounds = this.chart.timeScale().getVisibleRange();
							const coord = this.chart
								.timeScale()
								.timeToCoordinate(Number(item.id), chartBounds);
							// console.log('coord:::', coord);
							const xCoordinate = coord !== null ? coord - 33 : -999;
							const coordinate = this.areaSeries.priceToCoordinate(
								Number(item.getAttribute("price"))
							);
							const toolTipHeight = 70;
							const coordinateY =
								coordinate - toolTipHeight > 0 ?
								coordinate - toolTipHeight :
								Math.max(
									0,
									Math.min(container.clientHeight - toolTipHeight, coordinate)
								);
							if (coordinate - toolTipHeight > 0) {
								const div = item.querySelector("div");
								div.className = "myProFit_el";
								item.style.top = coordinateY + "px";
							} else {
								const div = item.querySelector("div");
								div.className = "myProFit_el myProFit2_el";
								item.style.top = coordinateY + 5 + "px";
							}
							// console.log('find', xCoordinate, item.id / 1000);
							item.style.left = xCoordinate + "px";
						}
					}
				}
				// console.log('newVisibleTimeRange', newVisibleTimeRange.from, this.initEchartsData[0].time);
				// this.newToTime = newVisibleTimeRange.to
				if (newVisibleTimeRange.from == this.initEchartsData[0].time && this.initStatus) {
					// console.log('加载更多');
					if (this.acTick == 1) {
						this.getList(this.initEchartsData[0].time);
					} else {
						this.getListK(this.initEchartsData[0].time);
					}
				}

				//   if (
				//     newVisibleTimeRange.to != this.newSeries.time &&
				//     this.webSocketStatus
				//   ) {
				//     this.showBack = true;
				//   } else {
				//     this.showBack = false;
				//   }
				this.showBack = this.chart.timeScale().scrollPosition() < -1;
				// console.log('newVisibleTimeRange', newVisibleTimeRange, this.newSeries);
				// 获取最后一个数据点的时间
				// const lastDataPoint = this.areaSeries.lastValue();
				// const lastDataPointTime = lastDataPoint && lastDataPoint.time;
				// console.log('lastDataPoint', lastDataPoint);
			},

			subscribeCrosshairMove(param) {
				// console.log('param', param);
				if (param.point.x < 50) {
					// 加载老数据并更新图表
					console.log("滚动左侧了");
				}
			},
			//别的用户下单
			createOrder(data) {
				// console.log('data:::', data);
				let openOrder = localStorage.getItem("openOrder");
				if (openOrder == "true") {
					const container = document.getElementById("mychart");
					const tdElement = document.querySelector(
						"#mychart .tv-lightweight-charts table tr:first-child td:nth-child(2) div"
					);
					const toolTipWidth = this.myToolTip.width;
					const toolTipHeight = 70;
					const toolTipMargin = this.myToolTip.margin;
					// Create and style the tooltip html element
					const toolTip = document.createElement("div");
					// console.log('this.newSeries::', this.newSeries);
					toolTip.id = this.newSeries.time;
					toolTip.setAttribute(
						"price",
						this.newSeries.value || this.newSeries.close
					);
					toolTip.style =
						`width: 66px; height: 65px; position: absolute; box-sizing: border-box; font-size: 12px; text-align: left; z-index: 88; top: 12px; pointer-events: none; border-radius: 6px; padding: 4px;font-family: PingFang SC;`;
					toolTip.style.background = data.type == 1 ? "#2DCC70" : "#FF5449";
					toolTip.style.color = "#fff";
					// toolTip.innerHTML = `<div style="font-size: 12px; margin: 4px 0px; display: flex; align-items:center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
					// <img src="${data.avatar || require('@/assets/images/home/user.png')}" style="width:16px;margin-right: 5px" />
					// ${data.nickname}
					// </div>
					// <div style="display: flex; align-items:center;">
					// <img src="${data.type == 1 ? require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')}" style="width:16px;margin-right: 5px" />
					// ${data.amount}USDT
					// </div>
					// <div style="color: ${data.type == 1 ? '#2DCC70' : '#FF5449'}">
					// ${data.profit}USDT
					// </div>
					// `;
					toolTip.innerHTML = `
					<div class="otherOrder_el">
					<i class="el-icon-caret-top" style="position: absolute;left: 50%;top: -10px;font-size: 16px;transform: translateX(-50%); color: ${
            data.type == 1 ? "#2DCC70" : "#FF5449"
          }"></i>
					<div style="font-size: 12px; margin: 4px 0px; display: flex; align-items:center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
					<img src="${data.avatar ||
            require("@/assets/images/home/user.png")}" style="width:16px;margin-right: 5px" />
					${data.nickname}
					</div>
					<div style="display: flex; align-items:center;">
					${data.amount}USDT
					</div>
					<div style="display: flex; align-items:center;">
					${data.profit}USDT
					</div>
					<i class="el-icon-caret-bottom" style="position: absolute;left: 50%;bottom: -10px;font-size: 16px;transform: translateX(-50%); color: ${
            data.type == 1 ? "#2DCC70" : "#FF5449"
          }"></i>
					</div>
					`;
					tdElement.appendChild(toolTip);

					const chartBounds = this.chart.timeScale().getVisibleRange();
					// console.log('创建开始', this.newToTime);
					const coordinate = this.areaSeries.priceToCoordinate(
						this.newSeries.value || this.newSeries.close
					);
					const coord = this.chart
						.timeScale()
						.timeToCoordinate(this.newSeries.time, chartBounds);
					const xCoordinate = coord !== null ? coord - 33 : -999;
					const coordinateY =
						coordinate - toolTipHeight > 0 ?
						coordinate - toolTipHeight :
						Math.max(
							0,
							Math.min(container.clientHeight - toolTipHeight, coordinate)
						);
					// console.log('coordinateY', coordinateY, coordinate, coordinate - toolTipHeight);
					this.toolTipList.push(this.newSeries.time);
					if (coordinate - toolTipHeight > 0) {
						const div = toolTip.querySelector("div");
						div.className = "otherOrder_el";
						toolTip.style.top = coordinateY + "px";
					} else {
						const div = toolTip.querySelector("div");
						div.className = "otherOrder_el2";
						toolTip.style.top = coordinateY + 5 + "px";
					}
					toolTip.style.left =
						this.tick != "Tick" ? xCoordinate + "px" : xCoordinate + "px";
					// toolTip.style.top = coordinateY + 'px';
					// console.log('this.toolTipList', this.toolTipList);
					// 三秒后删除 dom
					setTimeout(() => {
						tdElement.removeChild(toolTip);
						let findIndex = this.toolTipList.findIndex(
							(i) => this.newSeries.time
						);
						this.toolTipList.splice(findIndex, 1);
						// console.log('this.toolTipList', this.toolTipList);
					}, 5000);
				}
				// console.log('弹框toolTip:::', toolTip, xCoordinate, coordinateY);
			},
			// 自己下单
			createMyOrder(data) {
				let myOrder = localStorage.getItem("myOrder");
				if (myOrder == "true") {
					const container = document.getElementById("mychart");
					const tdElement = document.querySelector(
						"#mychart .tv-lightweight-charts table tr:first-child td:nth-child(2) div"
					);
					// console.log('tdElement::', tdElement);
					const toolTipWidth = this.myToolTip.width;
					const toolTipHeight = this.myToolTip.height;
					const toolTipMargin = this.myToolTip.margin;
					// Create and style the tooltip html element
					const toolTip = document.createElement("div");
					toolTip.id = this.newSeries.time;
					toolTip.setAttribute(
						"price",
						this.newSeries.value || this.newSeries.close
					);
					toolTip.style =
						`width: 66px; height: 50px; position: absolute; font-size: 12px; text-align: left; z-index: 88; top: 12px; pointer-events: none; border-radius: 6px;font-family: PingFang SC;`;
					toolTip.style.color = data.type == 1 ? "#2DCC70" : "#FF5449";

					toolTip.innerHTML = `
					<div class="myOrder_el">
					<div style="width: 60px; height: 32px;background: #0E0E0F;border-radius: 16px;border: 1px solid; border-color: ${
            data.type == 1 ? "#2DCC70" : "#FF5449"
          }; text-align: center;line-height: 30px;font-family: PingFang SC;">
						${data.amount}USDT
					</div>
				<div style="text-align: center;">
					<img src="${
            data.type == 1
              ? require("@/assets/images/home/zhangC.png")
              : require("@/assets/images/home/dieC.png")
          }" style="width: 12px;" />
				</div>
				</div>
				`;
					// <div style="font-size: 12px; margin: 4px 0px; display: flex; align-items:center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; ">
					// 	<img src="${data.avatar || require('@/assets/images/home/user.png')}" style="width:16px;margin-right: 5px" />
					// 	${data.nickname}
					// </div>
					tdElement.appendChild(toolTip);

					const chartBounds = this.chart.timeScale().getVisibleRange();
					// console.log('创建开始', this.newSeries);
					const coordinate = this.areaSeries.priceToCoordinate(
						this.newSeries.value || this.newSeries.close
					);
					const coord = this.chart
						.timeScale()
						.timeToCoordinate(this.newSeries.time, chartBounds);
					const xCoordinate = coord !== null ? coord - 33 : -999;
					// console.log("coordinate:::", coordinate, xCoordinate);
					// const coordinateY = coordinate > 70 ? coordinate + 50 : coordinate
					const coordinateY =
						coordinate - toolTipHeight > 0 ?
						coordinate - toolTipHeight :
						Math.max(
							0,
							Math.min(container.clientHeight - toolTipHeight, coordinate)
						);
					this.myToolTipList.push(this.newSeries.time);
					if (coordinate - toolTipHeight > 0) {
						const div = toolTip.querySelector("div");
						div.className = "myOrder_el";
						toolTip.style.top = coordinateY + 12 + "px";
					} else {
						const div = toolTip.querySelector("div");
						div.className = "myOrder2_el";
						toolTip.style.top = coordinateY - 12 + "px";
					}
					// console.log('创建完成', {
					// 	...data,
					// 	timestamp: this.newSeries.time,
					// });
					// console.log('coordinate', coordinate, coordinateY);
					toolTip.style.left =
						this.tick != "Tick" ? xCoordinate + "px" : xCoordinate + "px";
					// toolTip.style.top = coordinateY + 'px';
				}
				// 时间用最新的 不用下单的时间 方便后续删除dom
				this.$store.commit("upDataMyDownOrder", {
					...data,
					timestamp: this.newSeries.time,
				});
			},
			// 自己的收益
			createMyProFit(data) {
				// console.log('创建收益??', data);
				let myOrder = localStorage.getItem("myOrder");
				if (myOrder == "true") {
					const container = document.getElementById("mychart");
					const tdElement = document.querySelector(
						"#mychart .tv-lightweight-charts table tr:first-child td:nth-child(2) div"
					);
					// console.log('tdElement::', tdElement);
					const toolTipWidth = this.myToolTip.width;
					const toolTipHeight = 68;
					const toolTipMargin = this.myToolTip.margin;
					// Create and style the tooltip html element
					const toolTip = document.createElement("div");
					toolTip.id = this.newSeries.time;
					toolTip.setAttribute(
						"price",
						this.newSeries.value || this.newSeries.close
					);
					toolTip.style =
						`width: 62px; height: 44px; position: absolute; font-size: 12px; text-align: left; z-index: 88; top: 12px; pointer-events: none; border-radius: 6px;font-family: PingFang SC;color: #fff`;

					toolTip.innerHTML = `
					<div class="myProFit_el">
					<div class="jiao" style="background: ${data.type == 1 ? "#2DCC70" : "#FF5449"};--bg: ${data.type == 1 ? '#2DCC70' : '#FF5449'}">
						${this.$t('home.profit')}
						${Math.max(data.fact_profits, 0)}USDT
					</div>
				<div style="text-align: center;">
					<img src="${
			      this.bgType == 1
			        ? require("@/assets/images/home/zhangC.png")
			        : require("@/assets/images/home/dieC.png")
			    }" style="width: 12px;" />
				</div>
				</div>
				`;
					// <div style="font-size: 12px; margin: 4px 0px; display: flex; align-items:center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; ">
					// 	<img src="${data.avatar || require('@/assets/images/home/user.png')}" style="width:16px;margin-right: 5px" />
					// 	${data.nickname}
					// </div>
					tdElement.appendChild(toolTip);

					const chartBounds = this.chart.timeScale().getVisibleRange();
					// console.log('创建开始', this.newSeries);
					const coordinate = this.areaSeries.priceToCoordinate(
						this.newSeries.value || this.newSeries.close
					);
					const coord = this.chart
						.timeScale()
						.timeToCoordinate(this.newSeries.time, chartBounds);
					const xCoordinate = coord !== null ? coord - 33 : -999;
					// const coordinateY = coordinate > 70 ? coordinate + 50 : coordinate
					const coordinateY =
						coordinate - toolTipHeight > 0 ?
						coordinate - toolTipHeight :
						Math.max(
							0,
							Math.min(container.clientHeight - toolTipHeight, coordinate)
						);
					this.myToolProFitList.push(this.newSeries.time);
					if (coordinate - toolTipHeight > 0) {
						const div = toolTip.querySelector("div");
						div.className = "myProFit_el";
						toolTip.style.top = coordinateY + 5 + "px";
					} else {
						const div = toolTip.querySelector("div");
						div.className = "myProFit2_el";
						toolTip.style.top = coordinateY - 5 + "px";
					}
					// console.log('创建完成', {
					// 	...data,
					// 	timestamp: this.newSeries.time,
					// });
					// console.log('coordinate', coordinate, coordinateY);
					toolTip.style.left =
						this.tick != "Tick" ? xCoordinate + "px" : xCoordinate + "px";
					// toolTip.style.top = coordinateY + 'px';
					// 三秒后删除 dom
					setTimeout(() => {
						tdElement.removeChild(toolTip);
						let findIndex = this.myToolProFitList.findIndex(
							(i) => this.newSeries.time
						);
						this.myToolProFitList.splice(findIndex, 1);
						// console.log('this.myToolProFitList', this.myToolProFitList);
					}, 3000);
				}
			},
			//测试自己下单
			testMyOrder() {
				// this.newSeries = this.initEchartsData[39];
				// console.log("this.newSeries", this.newSeries);
				// // this.createMyOrder({
				// // 	type: 1,
				// // 	amount: 10
				// // })
				// this.createOrder(this.orderInfo);
				this.createMyProFit({
					"id": 6180,
					"user_id": 1182,
					"match_id": 3,
					"currency_id": 2,
					"range_id": 0,
					"type": 2,
					"is_insurance": 0,
					"seconds": 15,
					"number": 10,
					"open_price": "64417.54288",
					"end_price": "64448.30000000",
					"price_range": "23834.49087",
					"fee": "0.0000",
					"profit_ratio": "0.37",
					"fact_profits": -10,
					"status": 3,
					"pre_profit_result": 0,
					"profit_result": -1,
					"created_at": "2024-04-26 17:01:50",
					"updated_at": "2024-04-26 17:02:04",
					"handled_at": "2024-04-26 17:02:05",
					"complete_at": "2024-04-26 17:02:04",
					"agent_path": "1",
					"settled": 0,
					"trading_volume": "0.0000",
					"real_end_price": "64448.30000000",
					"pre_profit_result_admin": 0,
					"currency_code": "USDT",
					"symbol_name": "BTC/USDT",
					"account": "4598934",
					"profit": 0,
					"type_name": "跌",
					"status_name": "已平仓",
					"profit_result_name": "亏损",
					"currency": {
						"id": 2,
						"code": "USDT",
						"logo": "/uploads/20240310/acd01231dd34231e92423c3436897ce5.png",
						"desc": null,
						"decimal": 8,
						"accounts_display": [],
						"is_quote": 1,
						"draw_rate": "0.0200",
						"draw_min": "100.0000",
						"draw_max": "999999999",
						"created_at": "2021-02-21 09:28:22",
						"updated_at": "2024-03-10 11:56:15",
						"open_draw": 1,
						"micro_trade_fee": "0.000",
						"open_recharge": 1,
						"sort": 1,
						"open_bet": 1,
						"charge_min": "50",
						"charge_max": "9999999999",
						"marker_from": 2,
						"color": "#36cb10",
						"micro_account_display": false,
						"change_account_display": false
					},
					"currency_match": {
						"id": 3,
						"quote_currency_id": 2,
						"base_currency_id": 1,
						"market_from": 2,
						"sort": 1,
						"is_show": 1,
						"order_risk_rate": "0.0010",
						"micro_trade_fee": "0.00",
						"updated_at": "2022-02-20 10:51:22",
						"created_at": "2019-09-11 10:36:55",
						"symbol": "BTC/USDT",
						"base_currency_code": "BTC",
						"quote_currency_code": "USDT",
						"binance_symbol": "BTCUSDT",
						"base_currency": {
							"id": 1,
							"code": "BTC",
							"logo": "/uploads/20240310/cb2bd3fa2511372219efd9dc10b8003.png",
							"desc": null,
							"decimal": 8,
							"accounts_display": [],
							"is_quote": 0,
							"draw_rate": "0.0200",
							"draw_min": "0.0010",
							"draw_max": "999999999",
							"created_at": "2021-02-21 09:26:59",
							"updated_at": "2024-03-10 11:55:52",
							"open_draw": 1,
							"micro_trade_fee": "0.000",
							"open_recharge": 0,
							"sort": 0,
							"open_bet": 0,
							"charge_min": "0.001",
							"charge_max": "999999999",
							"marker_from": 2,
							"color": "#0a0a0a",
							"micro_account_display": false,
							"change_account_display": false
						},
						"quote_currency": {
							"id": 2,
							"code": "USDT",
							"logo": "/uploads/20240310/acd01231dd34231e92423c3436897ce5.png",
							"desc": null,
							"decimal": 8,
							"accounts_display": [],
							"is_quote": 1,
							"draw_rate": "0.0200",
							"draw_min": "100.0000",
							"draw_max": "999999999",
							"created_at": "2021-02-21 09:28:22",
							"updated_at": "2024-03-10 11:56:15",
							"open_draw": 1,
							"micro_trade_fee": "0.000",
							"open_recharge": 1,
							"sort": 1,
							"open_bet": 1,
							"charge_min": "50",
							"charge_max": "9999999999",
							"marker_from": 2,
							"color": "#36cb10",
							"micro_account_display": false,
							"change_account_display": false
						}
					}
				})
			},
			testAdd() {
				let obj;
				if (this.lastObj && this.lastObj.value) {
					this.lastObj = {
						value: String(Number(this.lastObj.value) + 1),
						time: this.lastObj.time + 10,
					};
				} else {
					let last = this.initEchartsData[this.initEchartsData.length - 1];
					console.log("last", last);
					this.lastObj = {
						value: String(Number(last.value) + 1),
						time: last.time + 10,
					};
				}
				console.log("lastObj", this.lastObj);
				this.areaSeries?.update(this.lastObj);
			},
			// 删除我自己下单的dom
			clearMyOrder(data) {},
			back() {
				this.chart.timeScale().scrollToRealTime();
				setTimeout(() => {
					// console.log('执行了》？');
					this.chart.timeScale().scrollToRealTime();
				}, 500);
			},
			areDecimalsSame(num) {
				// 将数字转换为字符串
				const numStr = num.toString();
				// 如果不是小数，直接返回 true
				if (numStr.indexOf(".") === -1) {
					return true;
				}
				// 获取小数点后的数字部分
				const decimalPart = numStr.split(".")[1];
				// 检查小数点后的数字是否都相同
				for (let i = 1; i < decimalPart.length; i++) {
					if (decimalPart[i] !== decimalPart[0]) {
						return false;
					}
				}
				return true;
			},
		},
		beforeDestroy() {
			closeSock();
		},
	};
</script>

<style scoped lang="less">
	.echart_box {
		position: relative;
		margin-bottom: 20px;
		overflow: hidden;
		margin-right: -5px;

		.back {
			position: absolute;
			left: calc(var(--timeWidth) - 135px);
			bottom: 30px;
			width: 36px;
			height: 36px;
			background-color: #262f42;
			z-index: 88;
			border: 1px solid #464b50;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		::v-deep .myOrder_el {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		::v-deep .myOrder2_el {
			display: flex;
			flex-direction: column-reverse;
			align-items: center;
		}


		::v-deep .myProFit_el {
			display: flex;
			flex-direction: column;
			align-items: center;

			.jiao {
				position: relative;
				width: 60px;
				height: 44px;
				border-radius: 6px;
				text-align: left;
				font-family: PingFang SC;
				padding: 6px 8px;
				margin-bottom: 8px;

				&::after {
					content: ' ';
					position: absolute;
					left: 50%;
					bottom: -10px;
					transform: translateX(-50%);
					width: 0;
					height: 0;
					border-top: 5px solid var(--bg);
					border-right: 5px solid transparent;
					border-left: 5px solid transparent;
					border-bottom: 5px solid transparent;
					// border-color: var(--bg);
				}
			}
		}

		::v-deep .myProFit2_el {

			.jiao {
				&::after {
					bottom: unset;
					top: -10px;
					border-top: 5px solid transparent;
					border-right: 5px solid transparent;
					border-left: 5px solid transparent;
					border-bottom: 5px solid var(--bg);
				}
			}
		}

		::v-deep .otherOrder_el {
			.el-icon-caret-top {
				display: none;
			}
		}

		::v-deep .otherOrder_el2 {
			.el-icon-caret-bottom {
				display: none;
			}
		}
	}
</style>